<!-- V-webapp/src/components/BottomTabbar.vue -->
<template>
  <div class="bottom-tabbar" v-if="showTabbar">
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path"
      :to="tab.path" 
      class="tab-item"
      :class="{ active: $route.path === tab.path }"
    >
      <el-icon><component :is="tab.icon" /></el-icon>
      <span class="tab-text">{{ tab.name }}</span>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const cartCount = ref(0)

const tabs = [
  { path: '/', name: '首页', icon: 'House' },
  { path: '/activities', name: '活动', icon: 'Calendar' },
  { path: '/products', name: '商城', icon: 'ShoppingBag' },
  { path: '/profile', name: '我的', icon: 'User' }
]

// 是否显示底部导航
const showTabbar = computed(() => {
  const hidePages = ['/login', '/mobile-tip', '/checkout']
  return !hidePages.includes(route.path)
})

// 模拟获取购物车数量
const fetchCartCount = () => {
  // 模拟数据
  cartCount.value = Math.floor(Math.random() * 5)
}

onMounted(() => {
  fetchCartCount()
})
</script>

<style scoped>
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding: 8px 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  max-width: 480px;
  margin: 0 auto;
  z-index: 1000;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 10px;
}

.tab-item.active {
  color: #409eff;
}

.tab-text {
  margin-top: 4px;
}
</style>